﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js实现放大镜</title>
<script src="js/utils/glass.js"></script>
<style>
    #box {
        position:relative;
    }
    #box .small_pic {
        width:360px;
        height:500px;
    }
    #box .small_pic img {
        width:100%;
        height:100%;
    }
    #box .small_pic .slider {
        width:180px;
        height:250px;
        background:rgba(255,255,255,.3);
        position:absolute;
        cursor:move;
        display:none;
    }
    #box .big_pic {
        position:absolute;
        top:0;
        left:370px;
        width:360px;
        height:500px;
        border:1px solid #ccc;
        overflow:hidden;
        display:none;
    }
    #box .big_pic img{
        position:absolute;
    }

</style>
</head>
<body>
<div id="box">
    <div class="small_pic">
        <span class="slider"></span>
        <img src="images\after-sale\gantanhao.png"/>
    </div>
    <div class="big_pic">
        <img src="images\after-sale\gantanhao.png"  width="720" height="1000"/>
    </div>
</div>
</body>
</html>
